<template>
  <div class="app-page">
    <!-- app数据管理 页面分析 -->
    <el-row
      type="flex"
      justify="start">
      <el-date-picker
        v-model="searchParams.startTime"
        type="date"
        :editable="false"
        placeholder="开始日期"
        :picker-options="pickerOption0"
        format="yyyy-M-dd"
        value-format="yyyy-M-dd"
      />
      <span style="line-height: 36px;">~</span>
      <el-date-picker
        v-model="searchParams.endTime"
        type="date"
        :editable="false"
        placeholder="结束日期"
        format="yyyy-M-dd"
        value-format="yyyy-M-dd"
        :picker-options="pickerOption1"
      />
      <el-button
        type="primary"
        @click="handleSearch">搜索</el-button>
    </el-row>
    <content>
      <el-row :gutter="40">
        <el-col :span="24">
          <CommonTable
            ref="totalbrowsecounts"
            is-standard-data
            :table-head="[ { label: '总浏览量', prop: 'browseCounts' }, { label: '平均浏览量', prop: 'avgBroCountsPerDay' }, { label: '平均浏览时长', prop: 'avgBrowseTime' } ]"
            :search-params="searchParams"
            url="/midea/menu/analyse/totalbrowsecounts"
          />
        </el-col>
        <el-col :span="24">
          <!-- :table-head="[ '页面名称', '访问量', '浏览时长', '退出率' ]" -->
          <CommonTable
            ref="pagesbrowsecounts"
            is-standard-data
            :table-head="[ { label: '页面名称', prop: 'name' }, { label: '访问量', prop: 'visitCounts' }, { label: '浏览时长', prop: 'browseTimes' }, { label: '退出率', prop: 'quitRate' } ]"
            :search-params="searchParams"
            url="/midea/menu/analyse/pagesbrowsecounts"
            title="页面统计："
          />
        </el-col>
        <el-col :span="12">
          <CommonTable
            ref="appfuncusedata"
            :table-head="[ '功能', '使用次数', '平均使用人数' ]"
            :search-params="searchParams"
            url="/midea/menu/analyse/appdata/appfuncusedata"
            title="APP功能使用数据："
          />
        </el-col>
        <el-col :span="12">
          <CommonTable
            ref="appusetimelen"
            is-standard-data
            :table-head="[ { label: '时间段', prop: 'time' }, { label: '平均在线人数', prop: 'avgOnlineUser' }, { label: '平均在线时长', prop: 'avgOnlineTime' } ]"
            :search-params="searchParams"
            url="/midea/menu/analyse/appdata/appusetimelen"
            title="APP使用时段/时长："
          />
        </el-col>
      </el-row>
    </content>
  </div>
</template>

<script>
import CommonTable from '../components/CommonTable'

export default {
  components: { CommonTable },
  data () {
    return {
      // 搜索条件
      searchParams: {
        dayweekmonth: 0,
        endTime: '2019-08-20',
        startTime: '2018-07-20'
      },
      // 校验开始日期不能大于结束日期
      pickerOption0: {
        disabledDate: (time) => {
          if (this.searchParams.endTime !== '') {
            return time.getTime() > this.searchParams.endTime
          } else {
            return false
          }
        }
      },
      pickerOption1: {
        disabledDate: (time) => {
          if (this.searchParams.startTime !== '') {
            return time.getTime() < this.searchParams.startTime
          } else {
            return false
          }
        }
      }
    }
  },
  methods: {
    handleSearch () {
      this.$refs.totalbrowsecounts.handleSearch()
      this.$refs.pagesbrowsecounts.handleSearch()
      this.$refs.appfuncusedata.handleSearch()
      this.$refs.appusetimelen.handleSearch()
    }
  }
}
</script>

<style lang="scss">
.app-page {
  content {
    p {
      line-height: 2;
      font-weight: bold;
      font-size: 20px;
      span {
        float: right;
        color: blue;
      }
    }
  }
}
</style>
